01 — 简介

Three.js Journey · Bruno Simon · 难度：简单

01 — 简介 课程海报

介绍

你好，欢迎来到这里。这节课其实算不上真正的课程，更像是一个自我介绍，并展示你的旅程中接下来会发生什么。

之所以要有这么长的开场白，主要是因为这门课程内容相当全面，你需要做好充分的准备。

还不是学生？

部分课程（比如这一课）是免费的，而且大多数课程的开头部分也免费开放。我这样做是为了让你能先睹为快，了解课程里有什么。

如果你已经注册了 Three.js Journey，请忽略这条消息，因为你可以访问每一节课。但如果你还不是 Three.js Journey 的学生，不妨看一看。亲自体验一下，如果你喜欢这些内容，就加入我们吧。

现在让我来做个自我介绍。

我是谁？

我叫 Bruno Simon，是一名法国创意开发者，你大概能从视频里听出来。

目前我是一名自由职业开发者，与世界各地的客户合作。我曾经是 Immersive Garden（一家法国创意工作室）的首席开发者。而且多年来，我一直在法国的多个研究生和硕士学位项目中担任教授。我为初学者讲授 Web 开发，也为更有经验的学生讲授 WebGL 与 Three.js。

我最喜欢的活动，正如你所猜到的，是 WebGL，尤其是 Three.js。多年来我一直在各种项目中使用它，并且在 2019 年上线了我的作品集网站（https://bruno-simon.com）。最初我只是想为我的学生展示一些技巧，但我乐在其中，所以不断改进，大家似乎也很喜欢。

以下是我参与过的一些客户项目：

还有一些我只是为了好玩而做的实验：

为什么要开这门课？

当我开始学习 Three.js 时，资源并不多。这个库当时正在蓬勃发展，但毫无疑问它还年轻，文档也有相当大的缺口。那时我们只能硬着头皮去啃代码和示例，翻遍关于常见问题的讨论帖，一遍遍尝试直到成功。

如今，文档已经非常出色。我们有相当不错的教程，库本身也很稳定，尽管它仍在社区的推动下不断演进。然而，一门手把手带你走完全程的终极课程仍然缺失。如果有人能引导你透彻理解这门技术，并积累足够的经验，让你做项目时不再挣扎、不再迷失，那将是极大的帮助。

我的作品集网站上线后，很多人问我能否指导他们，或者去哪里学习我所使用的技巧。我对 Three.js 有深入的了解，也知道如何教学。当我收到这些请求时，我觉得是时候打造这门面向所有人的在线课程了。

你将学到什么？

Three.js 非常庞大，你可以用它做出无穷无尽的东西。这也是为什么这门课程这么长。

课程内容按章节划分，面向绝对的初学者。如果你对 WebGL 和 Three.js 一无所知，但又想创建炫酷的 3D 网站，那你来对地方了。

有些人可能会忍不住直接跳到特定章节。没错，说的就是你，React 开发者！如果你时间紧迫，或者迫不及待想学习进阶主题，请自便，尽管去试。不过，我的建议还是按顺序一课一课地学。反正，如果太难了，你随时可以回到之前的章节。

正如我之前提到的，课程分成了几个章节。让我们逐个聊聊每一章，好让你对即将学习的内容有个心理准备。

在第一章，我们将学习所有基础知识，比如创建第一个场景、渲染它、添加物体、选择正确的材质、添加纹理、让一切动起来，甚至把它发布到线上。有些人可能会觉得这部分有点无聊，因为我们列举了很多元素。别担心，有趣和富有创造力的部分马上就来。

在下一章，我们会学习许多经典技巧：例如创建自己的几何体、添加灯光和阴影、与 3D 物体交互，以及添加粒子。从这时候起，事情会变得更加令人兴奋。

在第三章，我们会学习更多进阶技巧，甚至会暂时离开 WebGL 和 Three.js，学习如何使用 Blender 创建自己的 3D 模型。没错！你会在这门课程里学会使用 Blender。你还将学习如何用我为作品集网站所写的那个库来添加物理效果。我甚至还会教你在大型项目中我是如何组织代码的。

在第四章，我们将讨论shaders。如果你听说过 shaders，你大概知道这正是人们开始感到吃力的地方，而且不无道理。Shaders 很难，但 shaders 将解锁 WebGL 真正的威力。你将能够创造出乍一看似乎不可能的东西。如果你不明白我在说什么，别担心，等你学完这一章，一切都会豁然开朗。

在第五章，我们会更进一步，学习更多进阶技巧，比如后处理、性能优化，以及如何将 WebGL 与 HTML 混合使用。

在第六章，我们将学习如何创建像 Three.js Journey 首页上那样的场景。不会是同一个场景，因为那样的话这一章会变得又长又无聊，但技巧是完全一样的，之后你将能创造出任何类型的场景。

最后，在第七章，我们将学习如何在 React 应用中使用 React Three Fiber 来使用 Three.js。我知道你们很多人对此充满期待，我相信你们会喜欢这部分。你们会学到并练习的技巧数量非常庞大。你们甚至会制作一个带物理效果、真实游戏机制、UI 和炫酷特效的游戏。哦对了，如果你不了解 React，别担心，我会帮你搞定。有一节长达 4 小时的课程专门用来学习 React 基础。这算是个赠品。你来是为了学 Three.js，但一路上你还会学到一大堆别的东西。

因为我是创意开发者，我也会尽力帮你打造优雅的体验。我会给你很多技巧和窍门，帮你为你的 WebGL 作品找到恰到好处的微调。

更新

作为 Web 开发者，你大概已经知道如今技术更新换代有多快。库层出不穷，更新每天都在发生，想跟上节奏很难。

别担心，我会让 Three.js Journey 保持最新。事实上我一直在这样做。在我写这节课的时候，Three.js Journey 已经上线两年了，在这两年里，我一直在更新依赖和课程内容。我增加了 37 小时的视频。没错，这比课程当前总时长的一半还多。我会继续添加新内容，Three.js Journey 的学生无需额外付费就能访问。

如何学习这门课程？

难度

随着你学习这些课程，你会发现内容越来越难。你会感到吃力，但别担心，这完全正常。没人能在第一次尝试时就把所有东西都理解透。

首先要明白的是，如果学起来很难，那是因为这部分知识很有价值（或者是因为老师教得不好），所以坚持下去。

其次，是的，我们会接触有挑战性的主题，但之后我们还会练习。在多次攻克有挑战性的主题之后，你会开始理解它们。

找到最适合你的学习方法

每个人都有自己独特的学习方式。弄清楚如何从这门课程中收获最大，对你自己来说是很有价值的一课。

找到一天中你学习效率最高的时段。对我来说，是早上。不要急于求成，指望在一周内学完全部课程。大脑需要时间处理这些内容，而它在晚上处理得最好。也许可以一天试着学一两课（最多三课）。吃好、睡够、多喝水，保持健康。别忘了屏蔽一切干扰。

有些人喜欢先专心看课，不碰其他事情，然后自己尝试做练习，遇到困难时再回头重看对应的课程。

有些人只是喜欢跟着课程走，等一课看完，再就这个主题自己进一步钻研。

当然，你不必学完整个课程才开始做项目，无论是个人项目还是商业项目。如果你觉得自己想退出，想开始独立创作，那就放手去做吧！如果你需要，这门课会一直在那里等着你。

视频

如果你正在观看视频，你会注意到播放器有一些方便的功能。

例如，如果你觉得视频太快或太慢，可以调整播放速度。

你还可以使用一系列快捷键。你可以查看各个章节。你可以全屏播放。当你向下滚动时，视频会保持可见，等等。

请随意使用这些功能。

课程

你可能已经注意到，每节课同时提供视频版和文字版。文字版几乎和视频一样，你还能看到截图、视频预览、带语法高亮的代码等。选择你喜欢的版本就好。

在每节课中，我们会浏览各种文档页面、在线工具和示例。所有链接都会放在每页右下角的"🔗 Lesson's links"按钮下方。当你想深入了解我们讲到的任何主题时，点开它们看看吧。

练习

学习就是练习的过程，这就是为什么几乎每节课都会附上一个starter（起始）文件。

练习的final（最终）版本也会提供，以防你想直接查看结果。

关于这些压缩包里有什么、以及如何使用它们，稍后会详细介绍。

代码

每个开发者都有自己偏爱的编码方式，我也有我的。在课程中，代码会遵循我个人的偏好。你想怎么来就怎么来。如果你想重构所有代码，尽管去做。你甚至可以使用代码美化器自动帮你重新格式化代码。

前置要求

你需要一台能安装软件和编写代码的电脑。课程的部分内容可能因操作系统而异，比如终端命令或一些 Blender 快捷键。我总会提供 macOS 和 Windows 两个版本。

这门课程对新手友好，但你确实需要了解 JavaScript 的基础知识，比如变量、数组、对象、循环、函数和事件。

你还需要一个代码编辑器。我推荐 Visual Studio Code，因为它是一款打磨得很好的编辑器，拥有庞大的社区，并且每个月都有持续更新。不过，你可以使用适合自己的编辑器。中间会有几次需要安装插件，但这也不算什么大事，而且你很可能会找到对应你代码编辑器的插件。

另一个要求是一台带有实用开发者工具的现代浏览器。我会使用 Chrome，但你也可以用 Firefox。请不要用 Safari 或 Edge。它们在日常浏览上没问题，但调试起来就不行了。到某个阶段，我们会安装一些 Chrome 扩展，不过这些扩展是可选的。另外，要小心那些内置特殊安全和隐私功能的浏览器，比如 Brave。它们可能会干扰你的代码。

我们还会学习如何使用 Blender。它是一款免费的 3D 软件，支持所有主流操作系统，而且非常好用。如果你好奇，现在就可以试试。

你不需要擅长数学。我数学就糟透了，但我照样能做出很酷的 WebGL 作品。是的，擅长数学确实是个加分项，但没有它你也能行，而且我会把公式讲清楚。

最后，如果你对 Three.js 一无所知，那你就来对地方了。

遇到困难怎么办？

如果你因为任何原因卡住了，别担心，你不是一个人。

加入 Discord

作为 Three.js Journey 的学生，你可以访问一个仅限成员的 Discord 服务器。只需点击本页右上角的 Discord 按钮，加入Private server（私密服务器）即可。

那里目前有数千名成员，包括我自己，我们会尽力帮助你。作为回报，如果你愿意帮助别人，那就太棒了，我会非常感激。

顺便说一下，加入 Private Discord 的链接只能用一次，所以请确保用正确的账号加入（我知道你们有些人不知为何有一堆 Discord 账号）。

如果你之后需要再加入服务器，不必再次通过 Three.js Journey 网站。那个链接已经失效了。只需打开你的 Discord 应用，Three.js Journey Discord 服务器就会出现在左侧：

发布你的问题

关于发布问题，每节课都有一个对应的频道。请使用合适的频道，如果你的问题与课程无关（比如是关于个人项目的），请使用 #general-questions 频道。

要简短、简洁。

如果你有截图或视频那就更好了，但大多数时候你需要分享一些代码。在 Discord 里，你可以用三个反引号（就像引号但向左倾斜那种）来发送代码。

下面是一个例子：

```js
const hello = 'there'
```

加上语言标识（这里是 js）会自动添加语法高亮。这会极大地帮助我们为你排忧解难。

展示你的作品

你来这里是为了学习如何创建 3D 网站，对吧？

你不必学完整个课程才能做出漂亮的项目。学完几节课后，你就会发现自己已经有足够的知识去独立闯荡、自得其乐了。

但如果不能与世界分享，那又有什么意义呢？好消息是，在 Go Live 这节课里，你会学到如何免费把项目发布上线。

至于获得关注，我个人喜欢用 Twitter。所以我创建了 #threejsJourney 标签。使用它，或者直接 @ 我（@bruno_simon），这样我就能看到你的作品。如果我喜欢，我会转发，给你额外的曝光。

你也可以发布到 Discord 服务器上，如果你想获得反馈，这是理想的选择。去 Three.js Journey 的 Discord 服务器，在 #students-work 频道发布即可。

结业证书

最后，这门课程有一张结业证书。

但别以为我只要你看完所有视频就会把证书送给你。你得为每节课回答一个小测验。你可以从课程页面进入测验（播放器正下方的按钮），也可以从课程结束时弹出的窗口进入。

所有测验也可以从你的账户页面访问。

你需要先注册 Three.js Journey 才能看到测验。

如果你答错了，需要等几分钟才能再试。这段时间足够你去搜集信息，以便答对。

最终证书长这样 https://threejs-journey.com/certificate/view/17

你可以分享它，甚至可以打印出来。

结语

这个开场白相当长，但我想确保你有一个良好的开端。

现在是时候学习 Three.js 了。